<template>
    <div id="app">
        <div class="top">
            <span>出国惠</span>
            <router-link to="/money" width>
                <img src="../../../public/img/money/01(6).jpg" alt="" height="48px">
            </router-link>
            
        </div>
        <div class="nav">
            <ul class="oul">
                <li v-for='(v,id) in obj' :key="id">
                    <img :src="v.img" alt="">
                    <p>{{v.text}}</p>
                </li>
            </ul>
  
        </div>
        <div class="oimg">
            <img src="../../../public/img/money/01(2).jpg" alt="">
        </div>
        <div class="bi">
            <div class="item1">
                <div class="bv">币种</div>
                <div>
                    <span>购汇汇率</span>
                    <span>结汇汇率</span>
                    <span>结钞汇率</span>
                </div>
            </div>
          <div class="item1">
                <div class="bv">
                    <img src="../../../public/img/money/01(3).jpg" alt="">英镑
               </div>
                <div class="rg">
                    <span>7.9816</span>
                    <span>7.922</span>
                    <span>7.6954</span>
                </div>
            </div><div class="item1">
                <div class="bv">
                    <img src="../../../public/img/money/01(9).jpg" alt="">新西兰元
               </div>
                <div class="rg">
                    <span>4.0543</span>
                    <span>4.024</span>
                    <span>3.9089</span>
                </div>
                
            </div>
        </div>
  
        <div class="fuwu">
          <div class="list">
              <img src="../../../public/img/money/01(11).jpg" alt="">
              <h4>境外学习</h4>
              <p>一站式贴心服务</p>
          </div>
          <div class="list">
              <img src="../../../public/img/money/01(13).jpg" alt="">
              <h4>境外旅游</h4>
              <p>境外出行简单化</p>
          </div>
          <div class="list">
              <img src="../../../public/img/money/01(14).jpg" alt="">
              <h4>外币投资</h4>
              <p>多元化境外投资</p>
          </div>
          <div>
  
          </div>
        </div>
        <div class="licai">
            <div class="li-top">
                <span>跨境理财通</span>
                <span>薪酬汇</span>
            </div>
            <div class="bto">
                <div class="btov">
                    <span>产品介绍</span>
                    <span>开户指引</span>
                </div>
                <div class="imgl">
                    <img src="../../../public/img/money/01(4).jpg" alt="">
                </div>
  
            </div>
        </div>
        <div class="kuaj">
            <h3>跨境学堂</h3>
            <div class="cone">
                <img src="../../../public/img/money/x1.png" alt="" class="cone-img">
                <div class="zixun">
                    <p>跨境资讯</p>
                    <p>哈弗、MIT、各大等校长将“集中换届”，看看美国大学是如何选聘校长的！</p>
                    <p>2022-09-23</p>
                </div>
                 <h6>查看更多</h6>
            </div>
           
  
        </div>
  
  
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              obj:[
                  {id:"01",img:require("../../../public/img/money/01(7).jpg"),text:"人民币购汇"},
                  {id:"02",img:require("../../../public/img/money/01(8).jpg"),text:"境外汇款"},
                  {id:"03",img:require("../../../public/img/money/01(10).jpg"),text:"外币结汇"},
                  {id:"04",img:require("../../../public/img/money/01(12).jpg"),text:"GPI查询"},
                  {id:"05",img:require("../../../public/img/money/01(15).jpg"),text:"外汇买卖"},
                  {id:"06",img:require("../../../public/img/money/01(16).jpg"),text:"外汇预约兑换"},
                  {id:"07",img:require("../../../public/img/money/01(17).jpg"),text:"跨境理财通"},
                  {id:"08",img:require("../../../public/img/money/01(18).jpg"),text:"更多"},
              ]
          }
      }
  
  }
  </script>
  
  <style lang="scss" scoped>
  .top{
      height: .48rem;
      background: #1369b6;
      display: flex;
      justify-content: space-between;
      line-height: .48rem;
      padding: 0 .2rem;
      color: white;
  }
  .oul{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 .2rem;
      margin-top: .2rem;
  }
  .oul>li{
      width: .75rem;
      height: .65rem;
      text-align: center;
  }
  .oul>li>img{
      width: .4rem;
      height: .3rem;
      vertical-align: middle;
  }
  .oul>li>p{
      font-size: .12rem;
  }
  .oimg{
      width: 3.4rem;
      height: .78rem;
      margin:.2rem auto;
  }
  .oimg>img{
      width: 100%;
  }
  .bi{
      background: #e5f8ff;
      margin: 0 .2rem;
      border-radius: .1rem;
  
  }
  span{
      font-size: .14rem;
      margin-right: 0.1rem;
  }
  .item1{
      height: .38rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .12rem;
  }
  .item1 .bv{
     width: 1.36rem; 
     padding-left: .1rem;
     
  }
  .bv>img{
      width: .22rem;
      height: .16rem;
      vertical-align: middle;
  }
  .rg{
      width:2rem ;
  }
  .rg>span{
      margin:0 .12rem;
      text-align: center;
  }
  .fuwu{
      width: 100%;
      margin-top: .2rem;
      display: flex;
      justify-content: space-between;
      margin-left: .1rem;
      text-align: center;
  }
  .list{
      width: 1.02rem;
      height: 1.2rem;
      box-shadow:.05rem .05rem .05rem rosybrown ;
      border-radius: .1rem;
      padding-top: .2rem;
  
  }
  .list>img{
      width: .41rem;
      height: .34rem;
  } 
  .list p{
      font-size: .14rem;
  }
  .licai{
      margin-top: .2rem;
      padding: 0 .2rem;
  }
  .bto{
      background: white;
      box-shadow:.05rem .05rem .05rem #e3ebee ;
  }
  .btov>span{
      display: inline-block;
      width: .83rem;
      height: .24rem;
      text-align: center;
      line-height: .24rem;
      background: #e2f2fe;
      border-radius: .05rem;
      margin-top: .2rem;
  }
  .imgl{
      width: 3.06rem;
      height:3.38rem ;
      margin: auto;
      margin-top: .2rem;
  }
  .imgl>img{
      width: 100%;
  }
  .kuaj{
      overflow: hidden;
  }
  .kuaj>h3{
      margin: .2rem .2rem;
  }
  .cone{
      margin: 0 .2rem;
      margin-bottom: 1rem;
  }
  .zixun{
      padding: 0 .2rem;
      border-bottom: 1px solid #e5f8ff;
      line-height: .3rem;
  }
  h6{font-weight: 400;text-align: center; margin-top: .2rem;}
  </style>